<template>
  <div>
    <h1>App...</h1>
    <p>{{ $store.state.home.msg }}</p>
    <p>{{ $store.state.about.num }}</p>
    <p>{{ msg }}</p>
    <p>{{ num }}</p>

    <button @click="handleIncrement">+</button>
    <button @click="increment(2)">++</button>

    <button @click="handleDecrement">-</button>
    <button @click="DECREMENT(2)">--</button>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState({
      msg: (state) => state.home.msg,
      num: (state) => state.about.num,
    }),
  },
  methods: {
    ...mapActions(["increment"]),
    ...mapMutations(["DECREMENT"]),
    handleIncrement() {
      // 触发vuex中increment action函数
      this.$store.dispatch("increment", 1);
    },
    handleDecrement() {
      this.$store.commit("DECREMENT", 1);
    },
  },
};
</script>

<style></style>
